<template>
    <div class="childrenBox cb-3">
        <div class="textA">
            <p>支付笔记</p>
            <a class="el-icon-setting"></a>
        </div>
        <div class="textB">
            <p>{{payments}}</p>
        </div>
        <div class="textC" id="pn">
        </div>
        <div class="textD">
            <p>转化率 {{(conversionRates).toFixed(2)}}%</p>
        </div>
    </div>
</template>

<script>
import {getPaymentData} from "../../api/payment_api";

export default {
        name: "index",
        data() {
            return {
                payments: 0,
                conversionRates: 0
            }
        },
        created() {

        },

        methods: {
            //支付表接口
            getPayment(){
                getPaymentData().then(res => {
                    let data1 = res.data;
                    let data2 = data1.data;
                    let views1 = 0;
                    let number_payments1 = 0;
                    for (let i = 0; i < data2.length; i++) {
                        this.payments += data2[i].payment_amount
                        views1 += data2[i].views
                        number_payments1 += data2[i].number_payments
                    }
                    this.conversionRates = views1/number_payments1
                }).catch(err => {
                    console.error("支付表::", err)
                })
            },

            paymentNotes() {
                var myChart = this.$echarts.init(document.getElementById('pn'));
                var option = {
                    tooltip: {
                        //鼠标悬停提示内容
                        trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item

                    },
                    xAxis: {

                        data: []
                    },
                    yAxis: {
                        show:false,
                    },
                    series: [{
                        data: [ 17, 0, 27,0, 19, 24, 0, 33, 0, 20,14, 0, 30,0, 10, 24, 0, 23, 0, 10],
                        type: 'bar'
                    }]
                };
                option && myChart.setOption(option);
            }
        },

        mounted() {
            this.paymentNotes()
            this.getPayment()
        }

    }
</script>

<style scoped>
    p {
        padding: 0;
        margin: 0;
    }

    .childrenBox {
        flex: 1;
        background: #fff;
        height: 220px;
        width: 300px;
        margin: 25px;
    }

    .textA {
        display: flex;
        justify-content: space-between;
        margin: 15px;
        color: #8c8c8c;
    }

    .textA a {
        margin-top: 4px;
    }

    .textB {
        width: 100px;
        font-size: 35px;
        margin-left: 15px;
    }

    .textC {
        display: flex;
        justify-content: space-between;
        height: 60px;
        width: 300px;
        margin: 15px;
        border-bottom: 1px solid #b8ceef;
    }

    .textD p {
        display: flex;
        margin-left: 15px;
    }
</style>
